<template>
  <div>
    <div>
      <van-nav-bar
      title="用户信息编辑"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      />
    </div>
    <van-form >
      <van-field
        autocomplete="off"
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        autocomplete="off"
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        autocomplete="off"
        v-model="age"
        type="number"
        name="年龄"
        label="年龄"
        placeholder="年龄"
        :rules="[{ required: true, message: '请填写年龄' }]"
      />
      <van-radio-group v-model="gender">
        <van-cell-group>
          <van-cell title="女" clickable @click="gender = '女'">
           <template #right-icon>
              <van-radio name="女" />
            </template>
          </van-cell>
          <van-cell title="男" clickable @click="gender = '男'">
            <template #right-icon>
              <van-radio name="男" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-field
        autocomplete="off"
        v-model="dsc"
        name="用户描述"
        label="用户描述"
        placeholder="用户描述"
        :rules="[{ required: true, message: '请填写用户描述' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" @click="saveAll()">提交</van-button>
      </div>
    </van-form>
  </div>

</template>

<script>
import { editorUserMethod } from '@/api/editor'
export default {
  name: 'UserEditor',
  data () {
    return {
      username: '',
      password: '',
      age: '',
      gender: '女',
      dsc: ''
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async saveAll () {
      this.$store.commit('saveUsername', this.username)
      this.$store.commit('savePassword', this.password)
      this.$store.commit('saveDsc', this.dsc)
      this.$store.commit('saveGender', this.gender)
      this.$store.commit('saveAge', this.age)
      await editorUserMethod()
      this.$router.push('/user')
    }
  }
}
</script>

<style>
  .radio{
    padding-left: 14px;
  }
</style>
